import React from 'react'
import './Pager.css'
/**
 * 1. current: 当前页码
 * 2. total: 总数据量
 * 3. limit: 页容量，每页显示的数据量
 * 4. panelNumber: 数字页码最多显示多少个
 * 5. onPageChange: 页码改变抛出的事件
 */
export default function Pager(props) {
  const pageNumber = getPageNumber(props);
  let min = getMinNumber(props)
  let max = getMaxNumber(min, pageNumber, props)
  let items = []
  for (let i = min; i <= max; i++) {
    items.push(<span className={`item no-select ${props.current === i ? 'active' : ''}`} key={i} onClick={() => { toPager(i, props) }}>{i}</span>)
  }
  return (
    <>
      <span className={`item no-select ${props.current === 1 ? 'disabled' : ''}`} onClick={() => { toPager(1, props) }}>首页</span>
      <span className={`item no-select ${props.current === 1 ? 'disabled' : ''}`} onClick={() => { toPager(props.current - 1, props) }}>上一页</span>
      {items}
      <span className={`item no-select ${props.current === pageNumber ? 'disabled' : ''}`} onClick={() => { toPager(props.current + 1, props) }}>下一页</span>
      <span className={`item no-select ${props.current === pageNumber ? 'disabled' : ''}`} onClick={() => { toPager(pageNumber, props) }}>尾页</span>
      <span className="current no-select">{props.current} / {pageNumber}</span>
    </>
  )
}
/**
 * 获取总页码
 * @param {*} props 组件属性
 * @returns 总页码
 */
function getPageNumber(props) {
  return Math.ceil(props.total / props.limit)
}
/**
 * 获取最小页码
 * @param {*} props 组件属性
 * @returns 最小页码
 */
function getMinNumber(props) {
  let min = props.current - Math.floor(props.panelNumber / 2)
  return min = min < 1 ? 1 : min
}
/**
 * 获取最大页码
 * @param {*} min 最小页码
 * @param {*} pageNumber 总页码
 * @param {*} props 组件属性
 * @returns 最大页码
 */
function getMaxNumber(min, pageNumber, props) {
  let max = min + props.panelNumber - 1
  return max = max > pageNumber ? pageNumber : max
}
/**
 * 跳转页码
 * @param {*} target 目标页码
 * @param {*} props 组件属性
 * @returns 
 */
function toPager(target, props) {
  if (props.current === target) return;
  if (target < 1 || target > getPageNumber(props)) return;
  props.onPageChange && props.onPageChange(target)
}
